Sass 快速入门

发表于 | 更新于
本文字数： 5.5k | 阅读时长 ≈ 10 分钟

blur-browse-comfort

Sass 快速入门

What is Sass?

Sass 是 CSS 的一个扩展，它使得 CSS 的使用更加优雅和强大

Why Sass?

Sass 的以下特性使得 Sass 成为一个成熟、稳定、强大的 CSS 扩展语言解析器。

变量

变量声明

在 Sass 中，使用 $ 前缀符号来表明这是一个变量。同时，变量是存在作用域的。

1
2
3
4
5
6
7
8
9
10
11
12
$highlight-color: #f90;
nav {
  $width: 100px;
  width: $width;
  color: $highlight-color;
}

/* 编译后 */
nav {
  width: 100px;
  color: #f90;
}

变量引用

变量可以引用另一个变量

1
2
3
4
$highlight-color: #f90;
.selected {
  bodrer: 1px solid $highlight-color;
}

CSS 规则嵌套

选择器嵌套

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* sass */
#content {
  background: #555;
  article {
    h1 {
      color: #333;
    }
    p {
      margin-bottom: 1.4em;
    }
  }
  aside {
    background: #eee;
  }
}

/* 编译后 */
#content {
  background: #555;
}
#content article h1 {
  color: #333;
}
#content article p {
  margin-bottom: 1.4em;
}
#content aside {
  background: #eee;
}
父选择器的标识符&

Sass 提供父选择器的标识符 & 主要是为了解决例如 :hover 等伪类的特殊情况。考虑下面这个情况：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
article a {
  color: blue;
  :hover {
    color: red;
  }
}

/* 编译后，这与我们预期不符 */
article a {
  color: blue;
}
article a :hover {
  color: red;
}

使用父选择器的标识符 & 可以解决这个情况，& 指代父选择器本身。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
article a {
  color: blue;
  &:hover {
    color: red;
  }
}

/* 编译后 */
article a {
  color: blue;
}
article a:hover {
  color: red;
}
群组选择器的嵌套
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* sass */
.container {
  h1,
  h2,
  h3 {
    margin-bottom: 0.8em;
  }
}
nav,
aside {
  a {
    color: blue;
  }
}

/* 编译后的css */
.container h1,
.container h2,
.container h3 {
  margin-bottom: 0.8em;
}
nav a,
aside a {
  color: blue;
}

属性嵌套

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* sass */
nav {
  border: {
    style: solid;
    width: 1px;
    color: #ccc;
  }
}

/* 编译后的css */
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

属性和选择器嵌套是非常伟大的特性，因为它们不仅大大减少了你的编写量，而且通过视觉上的缩进使你编写的样式结构更加清晰，更易于阅读和开发。

导入

在原生 CSS 中，有一个不常用的特性是 @import 规则，它允许在 .css 文件中导入其他的 .css 文件，但是这种导入的运行机制是：只有当执行到
@import 语句时，浏览器才会去下载指定导入的 .css 文件，这导致页面加载起来会特别慢。

Sass 中实现的 @import 规则在生成 .css 文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个 CSS 文件中，而无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合器均可在导入文件中使用。

嵌套导入

1
2
3
4
5
6
7
8
9
10
/* blue-theme.scss文件 */
aside {
  color: blue;
  background: white;
}

/* base.css文件 */
.blue-theme {
  @import 'blue-theme';
}

静默注释

CSS 的标准注释会被保存在网页内，大多数时候这不是我们想要的结果。
Sass 提供了另一种类似 C 语言风格的注释，称之为静默注释，因为这类注释不会被保存在网页内，即浏览网页的用户看不到它们。

1
2
3
4
5
6
body {
  color: #999;
  /* 这是CSS的标准注释 */
  background: white;
  // 这是Sass提供的静默注释
}

混合器 mixin

Sass 提供了混合器来实现多组样式规则的复用。比如下面定义了一个简单的混合器，目的是添加跨浏览器的圆角边框。

1
2
3
4
5
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

然后你可以使用 @include 来使用混合器：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

//sass 最终生成：
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

何时使用混合器

利用混合器，可以很容易地在样式表的不同地方共享样式。如果你发现自己在不停地重复一段样式（严谨的描述是：几条样式规则），那就应该把这段样式构造成优良的混合器，尤其是这段样式本身就是一个逻辑单元，比如说是一组放在一起有意义的属性。

判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字。如果你能找到一个简洁的名字来描述这些属性修饰的样式，比如 rounded-corners, fancy-font, 或者 no-bullets，那么往往能够构造一个合适的混合器。如果你找不到，这时候构造一个混合器可能并不合适。

混合器在某些方面跟 CSS 类选择器很像。都是让你给一大段样式命名，所以在选择使用哪个的时候可能会产生疑惑。最重要的区别就是类名是在 html 文件中应用的，而混合器是在样式表中应用的。这就意味着类名具有语义化含义，而不仅仅是一种展示性的描述：用来描述 html 元素的含义而不是 html 元素的外观。而另一方面，混合器是展示性的描述，用来描述一条 CSS 规则应用之后会产生怎样的效果。

在之前的例子中，.notice 是一个有语义的类名。如果一个 html 元素有一个 notice 的类名，就表明了这个 html 元素的用途：向用户展示提醒信息。rounded-corners 混合器是展示性的，它描述了包含它的 CSS 规则最终的视觉样式，尤其是边框角的视觉样式。混合器和类配合使用可以写出整洁的 HTML 和 CSS，因为使用语义化的类名也可以帮你避免重复使用混合器。为了保持你的 HTML 和 CSS 的易读性和可维护性，在写样式的过程中一定要铭记二者的区别。

有时候仅仅把属性放在混合器中还远远不够，可喜的是，Sass 同样允许你把 CSS 规则放在混合器中。

混合器中的 CSS 规则

混合器中不仅可以包含属性，也可以包含 CSS 规则，即包含选择器和选择器中的属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 定义一个混合器
@mixin no-bullets {
  list-style: none;
  li {
    list-style-type: none;
    list-style-image: none;
    margin-left: 0;
  }
}

// 引用这个混合器
ul.plain {
  color: #444;
  @include no-bullets;
}

// 编译后的 css
ul.plain {
  color: #444;
  list-style: none;
}

ul.plain li {
  list-style-type: none;
  list-style-image: none;
  margin-left: 0;
}

给混合器传参数，定制样式

当 @include 混合器时，参数其实就是可以赋值给 CSS 属性值的变量。如果你写过 JavaScript，这种方式跟 JavaScrip t 的 function 很像：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover {
    color: $hover;
  }
  &:visited {
    color: $visited;
  }
}

// 引入混合器
a {
  @include link-colors(blue, red, green);
}

// 编译后的CSS
a {
  color: blue;
}

a:hover {
  color: red;
}

a:visited {
  color: green;
}

给混合器设置默认参数值

为了在 @include 混合器时不必传入所有的参数值，可以给参数指定一个默认值。这个默认值可以是任何有效的 CSS 属性值，甚至是其他参数的引用。比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 定义指定参数默认值的混合器
// 类似JavaScript中的函数
@mixin link-colors($normal, $hover: $normal, $visited: gray) {
  color: $normal;

  &:hover {
    color: $hover;
  }

  &:visited {
    color: $visited;
  }
}

// 引用混合器
a {
  @include link-colors(red);
}

// 编译后的CSS
a {
  color: red;
}

a:hover {
  color: red;
}

a:visited {
  color: gray;
}

选择器的继承

选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过 @extend 语法实现，如下代码:

1
2
3
4
5
6
7
8
9
.error {
  border: 1px red;
  background-color: #fdd;
}

.serious-error {
  extend .error;
  border-width: 3px;
}